<div class="row">
    <div class="col">
        <div class="card mb-4">
            <div class="card-body">Last Update Received: {{ (systemStream | async)?.timestamp ? ((systemStream | async)?.timestamp | date:'dd/MM/yyyy hh:mm:ss') : 'Unknown' }}</div>
        </div>
    </div>
</div>
<div class="row">

    <div class="col-xl-3 col-md-6">
        <sb-card-view-details
            class="d-flex h-100"
            link="/dashboard/system"
            [background]="'flex-grow ' + serverStateToStyle((systemStream | async)?.value?.serverState)"
        >
            <div class="card-body">Server State:<br/> {{ (systemStream | async)?.value?.serverState | defaultValue:'Unknown' }}</div>
        </sb-card-view-details>
    </div>

    <div class="col-xl-3 col-md-6">
        <sb-card-view-details
            class="d-flex h-100"
            link="/dashboard/system"
            background="flex-grow bg-primary"
        >
            <div class="card-body">
                Sytem CPU:
                <div class="row">
                    <ngx-gauge  type="arch"
                                [value]="((systemStream | async)?.value?.system?.cpuTotal) | defaultValue:0"
                                append="%"
                                [size]="165"
                                style="margin-left: auto; margin-right: auto;"
                    ></ngx-gauge>
                </div>
            </div>
        </sb-card-view-details>
    </div>

    <div class="col-xl-3 col-md-6">
        <sb-card-view-details
            class="d-flex h-100"
            link="/dashboard/system"
            background="flex-grow bg-primary"
        >
            <div class="card-body">
                Sytem RAM: ~{{ (systemStream | async)?.value?.system?.mem | defaultValue:'Unknown' }} MB / {{ (systemStream | async)?.value?.system?.memTotal | defaultValue:'Unknown' }} MB
                <div class="row">
                    <ngx-gauge  type="arch"
                                [value]="(memStream | async) | defaultValue:0"
                                append="%"
                                [size]="165"
                                style="margin-left: auto; margin-right: auto;"
                    ></ngx-gauge>
                </div>
            </div>
        </sb-card-view-details>
    </div>

    <div class="col-xl-3 col-md-6">
        <sb-card-view-details
            class="d-flex h-100"
            link="/dashboard/players"
            background="flex-grow bg-primary"
        >
            <div class="card-body">Online Players:<br/> {{ (playerStream | async)?.value?.length | defaultValue:'Unknown' }}</div>
        </sb-card-view-details>
    </div>
</div>
